<template>
    <div>
      <el-tabs @tab-click="handClick">
        <el-tab-pane label="全部" name="1">
          <div class="item" v-for="(item,index) in newMusic" :key="index">
            <img :src="item.album.blurPicUrl" width="350" height="200">
            <span class="checkspan">{{item.album.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artists[0].name}}</span>
            <el-button type="primary" @click="playMusic(item.id)">播放</el-button>
            <audio ref='audio' :src="musicUrl" controls="controls" class="myaudio"></audio>
          </div>
        </el-tab-pane>
        <el-tab-pane label="华语" name="2">
          <div class="item" v-for="(item,index) in newMusic" :key="index">
            <img :src="item.album.blurPicUrl" width="350" height="200">
            <span class="checkspan">{{item.album.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artists[0].name}}</span>
            <el-button type="primary" @click="playMusic(item.id)">播放</el-button>
            <audio ref='audio' :src="musicUrl" controls="controls" class="myaudio"></audio>
          </div>
        </el-tab-pane>
        <el-tab-pane label="欧美" name="3">
          <div class="item" v-for="(item,index) in newMusic" :key="index">
            <img :src="item.album.blurPicUrl" width="350" height="200">
            <span class="checkspan">{{item.album.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artists[0].name}}</span>
            <el-button type="primary" @click="playMusic(item.id)">播放</el-button>
            <audio ref='audio' :src="musicUrl" controls="controls" class="myaudio"></audio>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日本" name="4">
          <div class="item" v-for="(item,index) in newMusic" :key="index">
            <img :src="item.album.blurPicUrl" width="350" height="200">
            <span class="checkspan">{{item.album.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artists[0].name}}</span>
            <el-button type="primary" @click="playMusic(item.id)">播放</el-button>
            <audio ref='audio' :src="musicUrl" controls="controls" class="myaudio"></audio>
          </div>
        </el-tab-pane>
        <el-tab-pane label="韩国" name="5">
          <div class="item" v-for="(item,index) in newMusic" :key="index">
            <img :src="item.album.blurPicUrl" width="350" height="200">
            <span class="checkspan">{{item.album.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artists[0].name}}</span>
            <el-button type="primary" @click="playMusic(item.id)">播放</el-button>
            <audio ref='audio' :src="musicUrl" controls="controls" class="myaudio"></audio>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
export default {
  name: 'NewSongs',
  data () {
    return {
      type: 0,
      newMusic: [],
      musicUrl: ''
    }
  },
  watch: {
    type () {
      console.log(this.type)
      this.getMusic()
    }
  },
  created () {
    this.getMusic()
  },
  methods: {
    async getMusic () {
      const { data: res } = await this.$http.get(`/top/song?type=${this.type}&limit=${20}`)
      console.log(res)
      this.newMusic = res.data
    },
    // 播放音乐,获取音乐地址
    playMusic (musicId) {
      // 获取歌曲url
      this.$http.get('/song/url?id=' + musicId).then(response => {
        // 保存歌曲url地址
        console.log(response)
        this.musicUrl = response.data.data[0].url
        if (!response.data.data[0].url) {
          return this.$message.error('该资源为VIP专享，暂不支持播放 ！')
        }
        // console.log(this.musicUrl)
      })
    },
    // 标签改变触发事件
    handClick (tab, event) {
      if (tab.name === '1') {
        this.type = 0
      } else if (tab.name === '2') {
        this.type = 7
      } else if (tab.name === '3') {
        this.type = 96
      } else if (tab.name === '4') {
        this.type = 8
      } else if (tab.name === '5') {
        this.type = 16
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .item{
    float: left;
    padding: 25px;
  }
  .checkspan{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 1;
    font-size: 14px;
  }
</style>
